<template>
  <div>
    <van-nav-bar
      title="新品发布"
      left-text="返回"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      left-arrow
    >
      <template #right>
        <van-icon name="cart-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 导航条 -->
    <van-tabs @click="changePage">
      <van-tab v-for="item in categoryliset" :title="item.name" :key="item.id">
      </van-tab>
    </van-tabs>
    <div class="juzhon">
      <div v-for="(image, index) in aggregate" :key="index">
        <!-- 图片 -->
        <div class="xyangshi">
          <div><img class="yuanjiao" :src="image.src" /></div>
          <!-- 点击购买 -->
          <div class="pinden" style="display: flex; width: 100%">
            <div style="width: 75%">
              <P class="text1">{{ text1 }}</P>
              <P class="text2">{{ text2 }}</P>
            </div>
            <div class="leist" style="display: inline-block; width: 20%">
              <button class="btln1">{{ btln }}</button>
            </div>
          </div>
          <!-- 跟多 -->
          <div class="yangshi3">{{ text3 }}</div>
        </div>
        <div style="height:30px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { categoryPage } from "../lib/home";
export default {
  data() {
    return {
      categoryliset: [
        { id: 1, name: "最热新品" },
        { id: 2, name: "最近上新" },
        { id: 3, name: "即将开售" },
        { id: 4, name: "新品手机" },
      ],
      aggregate: [],
      text1: "Remi K20 Pro",
      text2: "绞龙885 旗舰处理器",
      btln: "去购买",
      text3: "了解更多 >",
    };
  },
  created() {
this.inti(1, 1);
  },
  mounted(){
      console.log("home");
      this.inti(1, 1);
    },
  methods: {
    
    onClickLeft() {
      this.$router.push({
        name: "Home",
      });
    },
    onClickRight() {},
    changePage(index) {
      let _id = this.categoryliset[index].id;
      this.inti(_id, 1);
    },
    inti(id, page) {
      categoryPage({ id: id, page: page }).then((res) => {
        console.log(res);
        if (res.msg == "ok") {
          console.log(res.data[0].data);
          this.aggregate = res.data[0].data;
        } else {
          this.aggregate = [];
        }
      });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.xyangshi {
  width: 90%;
  border-radius: 9px;
  box-shadow: rgb(59, 59, 58) 1px 1px 6px 1px;
  overflow: hidden;
  margin-bottom: 10%;
}
.yuanjiao {
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.xyangshi {
  margin: 0 auto;
}
.yangshi3 {
  line-height: 3;
  text-align: center;
  font-weight: bold;
}
.pinden {
  padding: 3%;
  border-bottom: 1px solid #ccc;
}
.text1 {
  font-weight: bold;
  font-size: 16px;
}
.text2 {
  color: rgb(223, 222, 222);
  font-size: 14px;
}
.btln1 {
  background-color: rgb(255, 94, 0);
  border: none;
  border-radius: 50px;
  height: 100%;
  width: 100%;
  color: white;
}
.juzhon{
    padding-top:3%;
}
</style>
